<template>
	<div class="session-tabs-container">
		<div class="row">
			<div class="tab" v-for="tab in tabs" :key="tab.id" :class="active === tab.id ? 't2' : 't1'" @click="choose(tab.id)">{{ tab.name }}</div>
		</div>
		<div class="line"></div>
	</div>
</template>

<script>
export default {
	name: 'SessionTop',
	data() {
		return {
			active: this.$route.query.type || 1,
			tabs: [
				{
					id: 1,
					name: '场景变量'
				},
				{
					id: 2,
					name: '聊天记录'
				},
				{
					id: 3,
					name: '全局校验记录'
				},
				{
					id: 4,
					name: '业务操作记录'
				},
				{
					id: 5,
					name: '表单列表'
				},
				{
					id: 6,
					name: '接听记录'
				},
				{
					id: 7,
					name: '文件列表'
				},
				{
					id: 8,
					name: '工作流记录'
				},
				{
					id: 9,
					name: '服务满意度'
				},
				{
					id: 10,
					name: '通话质量'
				},
				{
					id: 11,
					name: '实时质检报告'
				},
				{
					id: 12,
					name: '会话小结'
				}
			]
		};
	},
	methods: {
		choose(id) {
			this.$emit('choose', id);
			this.active = id;
		}
	}
};
</script>

<style scoped lang="less">
.session-tabs-container {
	.row {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-content: center;
		.tab {
			cursor: pointer;
		}
	}
}

.t1 {
	width: 120px;
	height: 30px;
	font-size: 14px;
	font-family: PingFang SC;
	font-weight: 400;
	color: rgba(136, 136, 136, 1);
	line-height: 24px;
	text-align: center;
}

.t2 {
	width: 120px;
	height: 30px;
	font-size: 14px;
	font-family: PingFang SC;
	font-weight: 400;
	color: rgba(99, 132, 254, 1);
	line-height: 24px;
	text-align: center;
	border-bottom: 1px solid rgba(99, 132, 254, 1);
}

.line {
	width: 100%;
	height: 1px;
	background: rgba(229, 229, 234, 1);
}
</style>
